const path = require("path");
const htmlPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const { VueLoaderPlugin } = require("vue-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
const AutoImport = require("unplugin-auto-import/webpack");
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");

module.exports = {
  entry: "./src/main.ts",
  output: {
    filename: "./js/[name].js",
    path: path.resolve(__dirname, "dist"),
  },
  resolve: {
    extensions: [".vue", ".js", ".json", ".ts"],
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader",
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true,
        },
      },
      {
        test: /\.vue$/,
        exclude: /node_modules/,
        use: {
          loader: "vue-loader",
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "less-loader",
          },
        ],
      },
    ],
  },
  devServer: {
    static: path.join(__dirname, "dist"),
    port: 2333,
  },
  plugins: [
    new htmlPlugin({
      title: "webpack5+vue3",
      filename: "index.html",

      template: path.resolve("index.html"),
    }),
    new webpack.HotModuleReplacementPlugin(),
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: path.posix.join("dist", "css/[hash]-[name].css"),
    }),
    new CssMinimizerWebpackPlugin(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: false })],
    }),
  ],
};
